import { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { NavBar, Collapse, Tag, Card, Button, Input, Toast } from "antd-mobile";
import http from "../../utils/http";
import MyTickInfo from "../../components/MyTickInfo";
import MyNavDate from "../../components/MyNavDate";
import { useSelector } from "react-redux";
import styles from "./index.module.css";

const Index = () => {
    const naigate = useNavigate();
    const { id } = useParams();
    //获取仓库的日期
    const { date } = useSelector((state) => state.CitySlice);
    const [DetailItem, setDetailItem] = useState({});
    //评论的内容
    const [value, setValue] = useState("");
    //评论的列表
    const [comList, setComList] = useState([]);

    const userInfo = JSON.parse(localStorage.getItem("userInfo"));

    const getDetail = async () => {
        const res = await http.get("/api/trip/train/detail", { params: { id } });
        const { code, data } = res.data;
        if (code === 200) {
            setDetailItem(data);
        }
    };

    useEffect(() => {
        getDetail();
    }, []);

    if (!DetailItem.id) {
        return <div>加载中...</div>;
    }

    //模拟座次信息
    const tickList = ["商务座", "一等座", "二等座"];
    //模拟票价信息
    const tickPrices = [
        DetailItem.tick.vip,
        DetailItem.tick.firstTick,
        DetailItem.tick.secondTick,
    ];

    const handelSubLis = () => {
        if (value === "") return Toast.show("请输入内容");

        setComList([...comList, value]);
        setValue("");
    };

    const handelToOrder = (price, levelseat) => {
        naigate(`/order?price=${price}&levelseat=${levelseat}`, {
            state: DetailItem,
        });
    };

    return (
        <div>
            <NavBar onBack={() => naigate("/")}>车次详情</NavBar>
            {/* 日期选择 */}
            <MyNavDate date={date}></MyNavDate>
            {/* 调用车次详情信息 */}
            <MyTickInfo data={DetailItem}></MyTickInfo>
            {/* 座次信息 */}
            <div>
                <Collapse arrowIcon={() => <Tag color="warning">订</Tag>}>
                    {tickList.map((item, ind) => (
                        <Collapse.Panel
                            key={ind}
                            title={
                                <p>
                                    {item}{" "}
                                    <span style={{ marginLeft: 15 }}>¥{tickPrices[ind]}</span>
                                </p>
                            }
                            onClick={() => handelToOrder(tickPrices[ind], item)}
                        ></Collapse.Panel>
                    ))}
                </Collapse>
            </div>
            {/* 评论功能 */}
            <div>
                <Card title="用户评价">
                    <div className={styles.com_wrap}>
                        <Input
                            placeholder="请输入内容"
                            value={value}
                            onChange={(val) => {
                                setValue(val);
                            }}
                        />
                        <Button
                            className={styles.cbtn}
                            onClick={() => handelSubLis()}
                            size="mini"
                        >
                            提交
                        </Button>
                    </div>
                    <div className={styles.com_list}>
                        {comList.map((item, ind) => (
                            <dl key={ind}>
                                <dt>
                                    <img src={userInfo.avatar} alt="" />
                                </dt>
                                <dd>{item}</dd>
                            </dl>
                        ))}
                    </div>
                </Card>
            </div>
            <div className={styles.detail_button}>
                <p>
                    <Button size='middle' style={{background:'#3e3d3dff',color:'#fff',width:'200px',height:'70px',marginLeft:'30px',marginTop:'20px'}} onClick={()=>naigate('/tuip')}>
                        退票
                    </Button>
                    <Button size='middle' style={{background:'#3e3d3dff',color:'#fff',width:'200px',height:'70px',marginLeft:'30px'}} onClick={()=>naigate('/gaip')}>
                        改签
                    </Button>
                </p>
            </div>
        </div>
    );
};

export default Index;
